<template>
    <a-locale-provider :locale="locale">
        <div id="app" class="app-admin">
            <router-view v-if="isRouterAlive" />
        </div>
    </a-locale-provider>
</template>

<script>
import "@/assets/css/commons.css"
import "@/assets/css/reset-ant.less"
//import 'codemirror/lib/codemirror.css'
// 引用cdn还可以这么写
import { locales } from 'ant-design-vue'
import "@/router";
import store from "@/store";
import { I18Parse, TokenUtil } from '@lowcode/jpaas-common-lib';

const langObj = {
    zhCN: locales.zh_CN,
    enUS: locales.en_US,
    jaJP: locales.ja_JP
}
let defaultlocale = langObj.zhCN;
defaultlocale = I18Parse.setDefaultlocale(defaultlocale, langObj);
import {
    mapState,
    mapMutations
} from 'vuex'


export default {
    provide() {
        return {
            reload: this.reload,
            broadCastChannel: this.broadCastChannel
        }
    },
    data() {
        return {
            locale: defaultlocale,
            isRouterAlive: true,
            isI18nLang: process.env.VUE_APP_ISLANGUAGE,
            broadCastChannel: new BroadcastChannel('broadCastChannel')
        }
    },
    computed: {
        ...mapState({
            siteName: (state) => state.appSetting.siteName
        }),
        siteNameTmp() {
            let siteName = JSON.parse(window.localStorage.getItem("siteName") || "{}");
            return siteName;
        },
        language() {
            let language = window.localStorage.getItem("language");
            if ('YES' !== this.isI18nLang || !language) {
                language = "zh-CN";
            }
            return language;
        }
    },
    created() {
        let language = this.language
        this.$i18n.locale = language;
        window.localStorage.setItem("language", language);
        //应用前端不显示管理后台链接
        this.broadCastChannel.postMessage("unShowAdmin");
        //a-main打开后台时传递过来的
        let { open } = this.$route.query;
        let href = window.location.href;
        // 在页面加载时读取localStorage里的状态信息
        let curUser = localStorage.getItem("curUser");

        if (curUser && localStorage.getItem('store')) {
            let state = JSON.parse(localStorage.getItem('store'));
            state.appSetting.logined = false;
            state.appSetting.frontType = 'admin';
            if (open && open === 'main' || href.includes('open=main')) {
                state.appSetting.activeKey = { user: "home-index", admin: "admin-index" };
                state.appSetting.appKey = { user: "", admin: "designApp" };
            }
            let _su = Object.assign({}, this.$store.state, state)
            this.$store.replaceState(_su);
        }
        // 在页面刷新时将vuex里的信息保存到localStorage里
        window.addEventListener("beforeunload", () => {
            localStorage.setItem("beforeunload", "beforeunload")
            //关闭时通知主应用，显示进入管理后台
            this.broadCastChannel.postMessage("showAdmin");

            localStorage.setItem('store', JSON.stringify(this.$store.state));
            let curUserId = localStorage.getItem("curUser");
            if (curUserId) {
                let { menuStyle, background, sideBar_Background, systemStyle } = this.$store.state.appSetting;
                let obj = { menuStyle, background, sideBar_Background, systemStyle }
                localStorage.setItem(`layoutStyleConfig_${curUserId}`, JSON.stringify(obj));
            }
        })

        /*首页换肤--yangxin*/
        let _colorStyle = localStorage.getItem(`colorStyle_${curUser}`);
        if (_colorStyle) {
            document.getElementById('colorStyle').setAttribute("href", _colorStyle); //实现将主题保存在内存中刷新浏览器不改变
        }
    },
    mounted() {
        document.title = this.siteName[this.language] || this.siteNameTmp[this.language] || "敏捷开发平台";
        this.initLinkLog();
    },
    methods: {
        ...mapMutations('appSetting', ['setActiveKey']),
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            })
        },
        updateDefaultlocale() {
            defaultlocale = I18Parse.setDefaultlocale(defaultlocale, langObj);
            this.locale = defaultlocale;
        },
        getFilePath(fileId) {
            return "/api/api-system/system/core/sysFile/public/download/" + fileId;
        },
        initLinkLog() {
            let fileId = localStorage.getItem("linkLogoUrl");
            if (fileId) {
                const oldLink = document.head.querySelector("[rel='icon']");
                if (oldLink) {
                    oldLink.href = this.getFilePath(fileId);
                } else {
                    const link = document.createElement('link');
                    link.rel = 'icon';
                    link.href = this.getFilePath(fileId);
                    document.head.appendChild(link);
                }
            }
        }
    },
    watch: {
        '$i18n.locale'(newVal, oldVal) {
            this.updateDefaultlocale();
            var accessToken = TokenUtil.getToken();
            if (newVal !== oldVal && accessToken) {
                this.reload();
            }
        },
    },

}
</script>
<style lang="less">
.aform-list .ant-col-sm-offset-4 {
    margin-left: 0px !important;
}

#app {
    height: 100%;
    overflow: hidden;
}


.modle {
    position: fixed !important;
    top: 60px;
    margin-left: calc(50% - 400px) !important;
    overflow: hidden;
    overflow-y: auto;
    bottom: 60px !important;
    background-color: white;
    padding: 0px !important;
    border-radius: 5px;
    max-height: calc(100% - 120px);
}

.modle>.ant-modal-content>.ant-modal-header {
    position: fixed;
    width: 800px;
    z-index: 99;
}

.modle {
    .ant-modal-content {
        .ant-modal-close {
            position: absolute;
            float: right;
            right: 0px;
            top: 0px;
            z-index: 999;
        }
    }
}

.modle>.ant-modal-content>.ant-modal-body>.ant-form-horizontal {
    position: relative;
    margin-top: 53px;
    z-index: 33;
}

.modle>.ant-modal-content {
    height: 100%;
    overflow: hidden
}

.modle>.ant-modal-content>.ant-modal-body {
    height: calc(100% - 60px) !important;
    overflow: hidden auto;
}
</style>
